<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			
			div{
				width: 100%;
				height: 500px;
				line-height: 500px;
				text-align: center;
				font-size: 100px;
			}
			
			div:nth-of-type(1){
				background: red;
			}
			div:nth-of-type(2){
				background: yellow;
			}
			
			div:nth-of-type(3){
				background: skyblue;
			}
			
			div:nth-of-type(4){
				background: green;
			}
			
			div:nth-of-type(5){
				background: orange;
			}
			
			a{
				width: 150px;
				height: 150px;
				background: white;
				border: 1px solid black;
				text-align: center;
				line-height: 150px;
				display: inline-block;
				position: fixed;
				right: 50px;
				bottom: 50px;
				text-decoration: none;
				color: black;
				cursor: pointer;
				display: none;
			}
		
		</style>
	</head>
	<body>
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
		<a name="top" id="Top">TOP</a>
		<script>
			var a = document.getElementsByName('top')[0];
			var aTag = document.getElementById('Top');
			console.log(a);
			//1.到达某个高度，出现回到顶部按钮
			//如果document.body.addEventListener('scroll',function(e){console.log(e);} 不设置overflow:scroll的话 body是没有滚动条
				
			window.addEventListener('scroll',function(e){//window的滚动条
				//scrollTop 滚动条滚动的高度
				//scrollHeight 滚动条总长度
				if ( parseInt(document.documentElement.scrollTop) > (parseInt(document.documentElement.scrollHeight)/5)){
					a.style.display = 'inline-block';
				} 
				if ( parseInt(document.documentElement.scrollTop) < (parseInt(document.documentElement.scrollHeight)/5)){
					a.style.display = 'none';
				}

			console.log( parseInt(document.documentElement.scrollTop));
			console.log(parseInt(document.documentElement.scrollHeight)/5);
			});
		
			
			
			//2.点击回到顶部按钮， 滚动效果
			var timer;
			a.addEventListener('click', function () {
				if ( document.documentElement.scrollTop == 0 ){
					clearInterval(timer);
				}
				timer = setInterval(function (){
//					if (document.documentElement.scrollTop < 800){
//						document.documentElement.scrollTop -= 500;
//					}else{
						document.documentElement.scrollTop -= 100;
//					}
				},20);
				
			});
			
			//transitionend 事件
		</script>
	</body>
</html>
